﻿@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    var clicked = true;
    var startCoordX;
    var startCoordY;
    var startWidth;
    var startHeight;
    $(document).ready(function () {
        $('#imageSelection_tl').draggable({
            drag: function (event, ui) {
                var position = $('#imageSelection_tl').position();
                $('#imageSelection_wrapper').css({
                    left: position.left + 4,
                    top: position.top + 4
                });
                var cropbox = $('#cropbox');
                cropbox.width(startWidth - (position.left + 4));
                cropbox.height(startHeight - (position.top + 4));
            },
            start: function (event, ui) {
                startWidth = $('#cropbox').width();
                startHeight = $('#cropbox').height();
                hideCorners();
            },
            stop: function (event, ui) {
                startHeight = $('#cropbox').height();
                showCorners();
                restoreCorners();
            },
            containment: 'parent'
        });

        $('#imageSelection_bl').draggable({
            drag: function (event, ui) {
                var position = $('#imageSelection_bl').position();
                $('#imageSelection_wrapper').css('left', position.left + 4);
                var cropbox = $('#cropbox');
                cropbox.width(startWidth - (position.left + 4));
                cropbox.height(position.top + 4);
            },
            start: function (event, ui) {
                startWidth = $('#cropbox').width();
                hideCorners();
            },
            stop: function (event, ui) {
                showCorners();
                restoreCorners();
            }
        });

        $('#imageSelection_br').draggable({
            drag: function (event, ui) {
                var position = $('#imageSelection_br').position();
                $('#cropbox').css({
                    width: $('#imageSelection_br').position().left + 4,
                    height: $('#imageSelection_br').position().top + 4
                });
            },
            start: function (event, ui) {
                hideCorners();
            },
            stop: function (event, ui) {
                showCorners();
                restoreCorners();
            }
        });

        $('#imageSelection_tr').draggable({
            drag: function (event, ui) {
                var position = $('#imageSelection_tr').position();
                $('#imageSelection_wrapper').css('top', position.top + 4);
                var cropbox = $('#cropbox');
                cropbox.height(startHeight - (position.top + 4));
                cropbox.css({
                    width: position.left + 4
                });
            },
            start: function (event, ui) {
                startHeight = $('#cropbox').height();
                hideCorners();
            },
            stop: function (event, ui) {
                showCorners();
                restoreCorners();
            }
        });

        $('#imageSelection_r').draggable({
            drag: function () {
                var left = $('#imageSelection_r').position().left;
                var cropbox = $('#cropbox');
                cropbox.width(left + 4);
                cropbox.height(startHeight);
            },
            start: function () {
                startHeight = $('#cropbox').height();
                hideCorners();
            },
            stop: function () {
                showCorners();
                restoreCorners();
            },
            axis: 'x'
        });
        $('#imageSelection_l').draggable({
            drag: function () {
                var left = $('#imageSelection_l').position().left;
                $('#imageSelection_wrapper').css('left', left + 4);
                var cropbox = $('#cropbox');
                cropbox.width(startWidth - (left + 4));
                cropbox.height(startHeight);
            },
            start: function () {
                var cropbox = $('#cropbox');
                startWidth = cropbox.width();
                startHeight = cropbox.height();
                hideCorners();
            },
            stop: function () {
                showCorners();
                restoreCorners();
            },
            axis: 'x'
        });
        $('#imageSelection_t').draggable({
            drag: function () {
                var top = $('#imageSelection_t').position().top;
                $('#imageSelection_wrapper').css('top', top + 4);
                var cropbox = $('#cropbox');
                cropbox.width(startWidth);
                cropbox.height(startHeight - (top + 4));
            },
            start: function () {
                var cropbox = $('#cropbox');
                startWidth = cropbox.width();
                startHeight = cropbox.height();
                hideCorners();
            },
            stop: function () {
                showCorners();
                restoreCorners();
            },
            axis: 'y'
        });
        $('#imageSelection_b').draggable({
            drag: function () {
                var top = $('#imageSelection_b').position().top;
                var cropbox = $('#cropbox');
                cropbox.width(startWidth);
                cropbox.height(top);
            },
            start: function () {
                var cropbox = $('#cropbox');
                startWidth = cropbox.width();
                hideCorners();
            },
            stop: function () {
                showCorners();
                restoreCorners();
            },
            axis: 'y'
        });
    });

    function restoreCorners() {
        var cropbox = $('#cropbox');       
        $('#imageSelection_bl').css({
            left: -4,
            top: cropbox.height() - 4
        });
        $('#imageSelection_tl').css({
            left: -4,
            top: -4
        });
        startWidth = cropbox.width();
        $('#imageSelection_br').css({
            left: cropbox.width() - 4,
            top: cropbox.height() - 4
        });
        $('#imageSelection_tr').css({
            left: cropbox.width() - 4,
            top: -4
        });
        $('#imageSelection_b').css({
           top: cropbox.height() - 4,
           left: cropbox.width()/2 - 4
        });
        $('#imageSelection_t').css({
           top: -4,
           left: cropbox.width()/2 - 4
       });
        $('#imageSelection_l').css({
           top: cropbox.height()/2 - 4,
           left: -4
       });
       $('#imageSelection_r').css({
           top: cropbox.height() / 2 - 4,
           left: cropbox.width() - 4
       });
    }

    function hideCorners() {
        $('#cropbox').css('opacity', '0.5');
        $('#imageSelection_br').css('opacity', '0');
        $('#imageSelection_tr').css('opacity', '0');
        $('#imageSelection_tl').css('opacity', '0');
        $('#imageSelection_bl').css('opacity', '0');
        $('#imageSelection_l').css('opacity', '0');
        $('#imageSelection_t').css('opacity', '0');
        $('#imageSelection_b').css('opacity', '0');
        $('#imageSelection_r').css('opacity', '0');
    }

    function showCorners() {
        $('#cropbox').css('opacity', '1');
        setPreviewSizes();
        $('#imageSelection_br').css('opacity', '1');
        $('#imageSelection_tr').css('opacity', '1');
        $('#imageSelection_tl').css('opacity', '1');
        $('#imageSelection_bl').css('opacity', '1');
        $('#imageSelection_l').css('opacity', '1');
        $('#imageSelection_t').css('opacity', '1');
        $('#imageSelection_b').css('opacity', '1');
        $('#imageSelection_r').css('opacity', '1');
    }

    function setPreviewSizes() {
        var cropbox = $('#cropbox');
        var preview = $('#preview');
        preview.css('width', cropbox.css('width'));
        preview.css('height', cropbox.css('height'));
        $('#imageSelection_wrapper').css({
            top: '0',
            left: '0'
        });
    }
</script>
<h2>@ViewBag.Message</h2>
<div id="image" style="position: absolute;">
    <div id="imageSelection_wrapper" style="display: block; position: absolute; top: 0; left: 0;">
        <img id="cropbox" src="/Content/Obama.jpg" style="position: absolute; z-index: 10; top:0; left: 0;"/>
    </div>
    <div id="imageSelection_container" style="position: relative; display: block">
        <span id="imageSelection_tl" class="selection-corner" style="left: -4px; top: -4px; width: 8px; height: 8px; cursor: nw-resize;"></span>
        <span id="imageSelection_bl" class="selection-corner" style="left: -4px; top: 846px; width: 8px; height: 8px; cursor: sw-resize;"></span>
        <span id="imageSelection_tr" class="selection-corner" style="left: 496px; top: -4px; width: 8px; height: 8px; cursor: ne-resize;"></span>
        <span id="imageSelection_br" class="selection-corner" style="left: 496px; top: 846px; width: 8px; height: 8px; cursor: se-resize;"></span>
        <span id="imageSelection_t" class="selection-corner" style="left: 246px; top: -4px; width: 8px; height: 8px; cursor: n-resize;"></span>
        <span id="imageSelection_b" class="selection-corner" style="left: 246px; top: 846px; width: 8px; height: 8px; cursor: s-resize;"></span>
        <span id="imageSelection_r" class="selection-corner" style="left: 496px; top: 421px; width: 8px; height: 8px; cursor: e-resize;"></span>
        <span id="imageSelection_l" class="selection-corner" style="left: -4px; top: 421px; width: 8px; height: 8px; cursor: w-resize;"></span>
        <img id="preview" src="/Content/Obama.jpg"/>
    </div>
</div>
@if(ViewBag.Cropped) {
<div>
    <img id="image_min" src="/Content/Obama_min.jpg"/>
    
</div>
}
<form method="POST" id="cropping">
    <input type="hidden" id="x" name="x"/>
    <input type="hidden" id="y" name="y"/>
    <input type="hidden" id="height" name="height"/>
    <input type="hidden" id="width" name="width"/>
    <input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
    $(document).ready(function () {
//		$("#cropbox").Jcrop({
//			onSelect: setSizes
//		});
    });

    function setSizes(c) {
        $("#x").val(c.x);
        $("#y").val(c.y);
        $("#height").val(c.h);
        $("#width").val(c.w);
    }
</script>